<script setup>
import { ref } from 'vue';
//获取路径id
import { useRoute } from 'vue-router';
const route = useRoute();
  // 获取路径参数 'id'
  const id = ref(route.query.id);
  console.log(id.value)
  //  文件标志

import { Document } from '@element-plus/icons-vue'

const fileList = ref([])
//获取数据
 const msg=ref('')
import {getDetailService,getDownLoadService} from '@/api/AnnouncementAll.js';

const getDetails=async()=>{
  let result= await getDetailService(id.value)
  msg.value=result.data.content
  fileList.value=result.data.annex
}
getDetails()
import { ElMessage } from 'element-plus'//警告框

const downloadFile= async(url)=>{
    try {
      let result = await getDownLoadService(url);
      // ... 处理 
      ElMessage.success("下载成功")
    } catch (error) {
      // ... 错误处理 ...
      ElMessage.error("下载失败")
    }
   
}





  </script >
<template>
    
    <div class="common-layout">
    <el-container>
      <el-header>
        <div class="center-text">
            <span class="highlighted-text">华北电力大学（保定）</span>
        </div>
      </el-header>
      <el-main>
          <!-- 文本 -->
          <el-text class="large-text" >{{msg}}</el-text>
          
          <div class="file-list">
            <div v-for="(file, index) in fileList" :key="index" class="file-item">
              <el-icon><document /></el-icon>
              
                <span class="highlighted-text" @click="downloadFile(file.url)">{{ file.name }}</span>
              
            </div>
          </div>

      </el-main>
      
    </el-container>
  </div>

  </template>
  

  
  <style scoped>
  .highlighted-text {
    color: #e24a4f; /* 蓝色 */
    font-weight: bold; /* 加粗 */
    font-size: 30px; /* 字体大小 */
    /* 其他样式 */
  }
  .center-text {
    text-align: center; /* 水平居中 */
  margin-top: 20px; /* 距离顶部的距离 */
}
/* 字体大小 */
.large-text {
  font-size: 20px; /* 设置字体大小 */
  /* 其他样式 */
}
/* 文件 */
/* 设置文件列表在页面左下角 */
/* 设置文件列表在页面底部中间 */
.file-list {
  position: fixed; /* 设为固定定位 */
  left: 50%; /* 左边距离设为 50% */
  bottom: 0; /* 底部距离设为 20px */
  transform: translateX(-50%); /* 水平方向上移动自身宽度的一半，以居中 */
  display: flex; /* 使用 Flex 布局 */
  flex-direction: column; /* 竖直方向排列 */
  margin: 100px; /* 设置外边距，让列表与边界有一定距离 */
}

/* 文件项样式 */
.file-item {
  display: flex; /* Flex 布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 底部留出一定间距 */
}

/* 文件图标样式 */
.file-item el-icon {
  margin-right: 10px; /* 图标与文件名之间留出一定间距 */
}
.highlighted-text {
    color: #007bff; /* 蓝色 */
  text-decoration: underline; /* 下划线效果 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 18px; /* 字体大小设置为 18px */
  
}

.highlighted-text:hover {
    
  color: #7300e6; /* 鼠标悬停时的颜色（紫色） */
}
  </style>